[iOS]これからiOSアプリを作る方向け Storyboardで画面遷移を作る

これからiOSアプリを作る開発者が覚えておきたい事

こんにちは、Objective-Cを始めて1年が経過した荒川です。とは言いつつも最近はBLEだとか、かじった程度のC++とCをいじっている事が多いです。

最近ではiOSアプリケーションを作成できるAppleの新しい言語「Swift」が発表され、iOSエンジニアではない方からも注目を集めています。

iOSアプリケーションの作り方について、言語に注目されている今だからこそUIの作成について記事にします。

狭い画面領域でユーザーが使いやすいと思えるUIを提供するのが、スマートフォンアプリケーションの肝です。

特にiOSアプリケーションにおいては、UIの描画をするために優れたGUIツールが提供されています。もちろん、GUIツールを使わずにコードでも表現は出来ますが、使い方を覚えれば開発効率を向上させる事ができるでしょう。

今回は、Objective-C・Swift、両方で使えるStoryboardの使い方についておさらいします。

Storyboard予備知識

Storyboardの使用例です。以下のように画面やパーツがグラフィカルに作成できます。

Storyboardを使う前に、まずは予備知識を身につけましょう。

Storyboardを使うメリット

• プッシュ（左から右へ遷移）・モーダル（下から新しい画面が出てくる遷移）が簡単に作れます。
• ViewControllerやUIKitオブジェクトをドラッグ&ドロップで追加できます。
• 各Viewのクラスファイルへの紐付けをControl + ドラッグでできます。
• ボタンタップ時などのデリゲートメソッドをドラッグ&ドロップでクラスファイルへ定義できます。
• タップ・ピンチ・回転・スワイプ・パン・ロングプレスなどの指の動きの検知したい場合もドラッグ&ドロップでできます。
• 各Viewのもつ属性を、ほとんどコードを書く事なく表現できます。

Storyboardで不便な点

• リポジトリ管理をしている場合、コンフリクトが起こりやすいです。Storyboardの中身はplist（プロパティリスト）というxmlに似たファイルで構成されています。mergeが大変なので、複数人で同じStoryboardを同時に編集する事はリスクとなります。
• 一度ドラッグ&ドロップで紐づけたクラスファイルを削除したり、Storyboardから紐づけてあるViewを消すと実行時エラーになる可能性があります。警告などは出ないので、削除する前はStoryboardとクラスファイルとの関連付けを切りましょう。
• 画面数が極端に多い場合、巨大なStoryboardになりやすいです。大きすぎるStoryboardは、一覧性を下げて改修が大変になります。Storyboardはいくつでも追加・切り替えできますので、機能毎などで分けたりすることをオススメします。チームで開発する場合、担当機能を割り振ってそれぞれStoryboardを分割するとコンフリクトするリスクもなくなります。
• 各Viewへのタグ（int型の値をViewに紐づけて、クラス内でViewを保持できる仕組みです。）を設定できますが、実装者以外が見た場合は見逃しやすいです。コメントなどでStoryboardでタグを設定している事を明記した方が良いでしょう。

知っておけば回避できる事がほとんどです。知りましょう。

Storyboardで画面遷移

今回は、クラスファイルへの紐付け・画面遷移を紹介します。

1. Xcodeのプロジェクト新規作成
2. iOS Application
3. Single View Applicationテンプレートを選択
4. Project Navigator（画面左側のツリー、なければCommand + 1）のMain.Storyboardを選択
5. Object Library（画面右下のUI郡、なければCommand + Option + Control + 3）のUIButtonをViewController中央へドラッグ&ドロップ。
6. Attributes Inspector（画面右上のプロパティ設定、なければ配置したボタンオブジェクトを選択しCommand + Option + 4）を開き、表示文字の変更。
7. 画面右上の表示設定を分割ビューに変更。
8. Ctrl + ドラッグでボタンオブジェクトをViewControllerクラスへ紐付け。　
9. アクション（ボタンが押された時に呼ばれるイベント）メソッドを指定。　
10. Object LibraryからViewControllerを2つ追加。
11. UIViewControllerのサブクラスを2つ作成。
12. NavigationControllerを追加。
13. 追加した各ViewControllerへSegueを追加。遷移方法（Segueと呼びます）はそれぞれpushとmodalに設定。
14. SegueにIDを付与する。2つに設定。
15. ViewController.mのButtonを押した時の処理を記述（swiftでもほとんど同じです。）

- (IBAction)pushButtonNext:(id)sender {
    // IDを指定してSegueを呼び出します。
    // IDを条件分岐することによって2つ目のViewと入れ替える事ができます。
    [self performSegueWithIdentifier:@"pushView" sender:self];
}

以上で基本的な画面遷移が作れます。

SegueのIDをif文などで変えてあげれば、条件によって1つのボタンから2画面へ遷移することが可能です。

まとめ

Objective-C・Swiftのどちらでも、iOSアプリで画面を作る方法は大差ありません。

SwiftからiOSアプリの開発を始める方は、Storyboardの操作に慣れれば早くアプリケーションが作成できる事でしょう。

セミナーのお知らせ

9/21, 9/23のどちらかに渋谷駅近辺でXcodeを使ったiOSアプリケーションの小規模のセミナーを開催します。

• 対象：初級〜中級者（学生・社会人問いません）
• 人数：5人ほどを見込んでいます。
• 場所：電源のあるスペースをお借りします。渋谷駅近辺
• 時間：お昼頃から2〜3時間程度
• 料金：スペース代＋各自飲みもの代 講習自体は無料
• 講師：私 + α
• 持ち物：MacBook Air or Pro、最新版のXcodeをインストールしておいて下さい。
• 言語：Objective-C、SwiftどちらでもOK

主に私がStoryboardやCocoapodsを使ったOSSの使い方を実際にその場でレクチャーしたり、既に開発をしたことのある方へアドバイスをします。

希望される方がいらっしゃいましたら、TwitterかFacebookでご連絡下さい。

iPhoneアプリを作ってみたい方へ初心者向けの講習会を行おうと思います。 日程 : 9/21, 9/23どちらか1日 場所 : 渋谷駅近辺 定員 : 5名ほど 持ち物 : 最新版のXcodeがインストールされたMacBook 費用 : スペース代と各自飲み物代

— エフ氏 (@pakorepqu) 2014, 9月 6

Facebook:ブログのプロフィールにリンクが貼ってあります。メッセージ下さい。

先着順で、人数が集まればやりますが、集まらなければやりません。参加される方のスキル差にもよりますが、5名くらいで開催します。